<template lang="pug">
  .hall
    header
      .user        
        img.icon(:src="user.avatar")
        .userInfo
          .nickname {{user.nickname}}
          p.card-beans
            span.card {{user.cards}}
            span.beans {{user.points}} 
    .rooms
      .message 
        img(src="../assets/alert_icon.png")
        span {{notices.type}} : {{notices.content}}
      .creat-room(@click="creatRoom('six')")
        img(src="../assets/six.png")
      .creat-room(@click="creatRoom('nine')")
        img(src="../assets/nine.png")
    .creat-room-modal(:class="showModal ? 'show':''")
      .setting-form
        .closeBtn(@click="closeModal")
        p 创建房间，游戏未进行，不消耗房卡
        .settings
          cell(title="模式:" value-align="left")
            span
              input(type="radio" name="model" id="pt" value="pt" v-model="newRoomSetting.gameModel")
              label(for="pt") 普通模式
            span
              input(type="radio" name="model" id="jf" value="jf" v-model="newRoomSetting.gameModel")
              label(for="jf") 底分模式
          cell(title="底分:" value-align="left")
            span.checkBoxlabel(v-for="difen in newRoomSetting.difen")
              input(type="radio" name="difen" :value="difen.type" :id="difen.type" v-if="difen.checked" checked)
              input(type="radio" name="difen" :value="difen.type" :id="difen.type" v-else)
              label(:for="difen.type" ) {{difen.content}}
            
          cell( value-align="left")
            div.title 筹码：必须选择四组游戏筹码
            span.checkBoxlabel(v-for="difen in newRoomSetting.chouma")
              input(type="checkbox" name="chouma" :value="difen.type" :id="difen.type" v-if="difen.checked" checked)
              input(type="checkbox" name="chouma" :value="difen.type" :id="difen.type" v-else)
              label(:for="difen.type") {{difen.content}}            
          cell(title="看牌:" value-align="left")
            span.checkBoxlabel(v-for="difen in newRoomSetting.kanpai")
              input(type="radio" name="kanpai" :value="difen.type" :id="difen.type" v-if="difen.checked" checked)
              input(type="radio" name="kanpai" :value="difen.type" :id="difen.type" v-else)
              label(:for="difen.type") {{difen.content}}         
          cell(title="比牌:" value-align="left")
            span.checkBoxlabel(v-for="difen in newRoomSetting.bipai")
              input(type="radio" name="bipai" :value="difen.type" :id="difen.type" v-if="difen.checked" checked)
              input(type="radio" name="bipai" :value="difen.type" :id="difen.type" v-else)
              label(:for="difen.type") {{difen.content}}
          cell(title="上限:" value-align="left")
            span.checkBoxlabel(v-for="difen in newRoomSetting.shangxian")
              input(type="radio" name="shangxian" :value="difen.type" :id="difen.type" v-if="difen.checked" checked)
              input(type="radio" name="shangxian" :value="difen.type" :id="difen.type" v-else)
              label(:for="difen.type") {{difen.content}}          
          cell.permit(title="准入:" value-align="left" v-show="newRoomSetting.gameModel === 'jf'")
            span 入场设定
            input(v-model="newRoomSetting.enter.enter")
            span 离场设定
            input(v-model="newRoomSetting.enter.leave")        
          cell(title="局数:" value-align="left")
            span.checkBoxlabel(v-for="difen in newRoomSetting.jushu")
              input(type="radio" name="jushu" :id="difen.type" :value="difen.type" v-if="difen.checked" checked)
              input(type="radio" name="jushu" :id="difen.type" :value="difen.type" v-else)
              label(:for="difen.type") {{difen.content}}   
            span
              input(type="radio" name="jushu" id="twnteenyTimes")
              label(for="twnteenyTimes") 20局/2房卡
        .submit
          .btn(@click="submitCreate")
</template>
<style  lang="less">
//  @cell-value-color:#fff;
.hall{  
  header{
    height:80px;
    position: absolute;
    top: 0;
    width: 100%;
    // background-color: #000;
    // color: #fff;
    
    .user{
      width: 270px;
      padding-top:3px;
      height: 74px;
      background-image: url('../assets/info.png');
      background-size: 100% 100%;
      display: flex;
    }
    .icon{
      height: 65px;
      width: 65px;
      float: left;
      border-radius: 50%;
      text-align: center;
      overflow: hidden;
      margin-left: 4px;
      margin-top: 2px;
    }
    .userInfo{
      height: 80px;
      // width: 120px;
      float: left;
      padding-top:12px;      
    }
    .beans{

      margin-left: 20px;
    }
    
  }
  .rooms{
    margin-top:90px;
    // box-sizing: content-box;
    padding:10px;
    .creat-room{
      width: 100%;
      height: 110px;
      background-image: url('../assets/itemBG.png');
      background-size: 100% 100%;
      margin-bottom: 20px;
      position: relative;
      &:after{
        content: '';
        width: 100px;
        height: 38px;
        background-image: url('../assets/open_room.png');
        background-size: 100% 100%;
        position: absolute;
        bottom: 10px;
        left: 40px;
      }
      img{
        position: absolute;
        left: 40px;
        bottom:58px;
        width: 160px;
      }
    }
  }
  .creat-room-modal{
    position: absolute;
    top:70px;
    left: 100%;
    z-index: 9;
    width: 100%;
    height: 100%;
    padding:10px;
    height: 475px;
    transition: all ease 1 0;
    overflow-y: auto;
    &.show{
      left: 0;
    }
    .setting-form{
      background-image: url('../assets/creat_room.png');
      background-size: 100% 100%;
      height: 470px;
      width:100%;   
      padding-top:40px; 
      position: relative;
      .closeBtn{
        position: absolute;
        right: 10px;
        top:10px;
        width: 36px;
        height: 36px;
        background-image: url('../assets/X.png');
        background-size:100% 100%;
      }
      .submit{
        text-align: center;
        .btn{
          display: inline-block;
          width:100px;
          height: 38px;
          background-image: url('../assets/confirm.png');
          background-size:100% 100%;
        }

      } 
      .settings{
        padding:10px 20px;
        font-size:12px; 
        .weui-cell{
          color: #fff;
          background-color: #179fc3;
          border-radius: 10px;
          box-shadow:-1px 1px 1px #fff;
          margin-bottom: 5px;
          padding: 5px 15px;
          &:before{
            border-top:0px solid transparent;
          }
        }
        // @cell-value-color:#fff;
      }  
    }
    .permit{
      input{
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 8px;
        outline: none;
        border:1px solid #ccc;

      }
      
    }
    .weui-cell__ft{
      padding-left: 10px;
      color: #fff;
    }
  }
  .message{
    background-color: brown;
    // position: fixed;
    margin-bottom: 10px;
    img{
      width: 30px;
      height: 30px;
      

    }
  }
}


  
</style>
<script>
export default {
  name: 'Hall',
  props:['user'],
  data () {
    return {
      msg: 'Welcome to Your Hall',
      showModal:false    ,
      // gameModel:'pt'  ,
      newRoomSetting:{
        gameModel:'pt',
        // detail:[
        //   {
        //     type:'',
        //     options:[

        //     ],
        //     value:
        //   }
        // ]
        difen:[
          {
            id:1,
            type:'fourPoint',
            content: '4分',
            checked:true
          }
          ,{
            id:2,
            type:'tenPoint',
            content: '10分',
            checked:false
          }
          ,{
            id:3,
            type:'twenteenPoint',
            content: '20分',
            checked:false
          }
          ,{
            id:4,
            type:'fourtyPoint',
            content: '40分',
            checked:false
          }
          ,{
            id:5,
            type:'oneThoundPoint',
            content: '100分',
            checked:false
          }
          ,{
            id:6,
            type:'twoThoundPoint',
            content: '200分',
            checked:false
          }
        ],
        chouma:[
          {
            id:1,
            type:'twoPerFour',
            content: '2/4',
            checked:true
          }
          ,{
            id:2,
            type:'fourPerEight',
            content: '4/8',
            checked:true
          }
          ,{
            id:3,
            type:'fivePerTen',
            content: '5/10',
            checked:true
          }
          ,{
            id:4,
            type:'eightPerSixteen',
            content: '8/16',
            checked:true
          }
          ,{
            id:5,
            type:'tenPertwnty',
            content: '10/20',
            checked:false
          }
          ,{
            id:6,
            type:'twntyPerFourty',
            content: '20/40',
            checked:false
          }
          ,{
            id:7,
            type:'fiftyPerThound',
            content: '50/100',
            checked:false
          }
          ,{
            id:8,
            type:'ThoundPerTwoThound',
            content: '100/200',
            checked:false
          }
        ],
        xiazhu:[
          {
            id:1,
            type:'eightRound',
            content: '8轮',
            checked:true
          }
          ,{
            id:2,
            type:'tenRound',
            content: '10轮',
            checked:false
          }
          ,{
            id:3,
            type:'twnteenRound',
            content: '12轮',
            checked:false
          }
          ,{
            id:4,
            type:'fifteenRound',
            content: '15轮',
            checked:false
          }          
        ],
        kanpai:[
          {
            id:1,
            type:'none',
            content: '无',
            checked:true
          }
          ,{
            id:2,
            type:'100',
            content: '>100分',
            checked:false
          }
          ,{
            id:3,
            type:'300',
            content: '>300分',
            checked:false
          }
          ,{
            id:4,
            type:'500',
            content: '>500分',
            checked:false
          }          
        ],
        bipai:[
          {
            id:1,
            type:'none',
            content: '无',
            checked:true
          }
          ,{
            id:2,
            type:'100',
            content: '>100分',
            checked:false
          }
          ,{
            id:3,
            type:'300',
            content: '>300分',
            checked:false
          }
          ,{
            id:4,
            type:'500',
            content: '>500分',
            checked:false
          }          
        ],
        shangxian:[
          {
            id:1,
            type:'none',
            content: '无',
            checked:true
          }
          ,{
            id:2,
            type:'500',
            content: '500分',
            checked:false
          }
          ,{
            id:3,
            type:'1000',
            content: '1000分',
            checked:false
          }
          ,{
            id:4,
            type:'2000',
            content: '2000分',
            checked:false
          }          
        ],
        enter:{
          enter:0,
          leave:500
        },
        jushu:[
          {
            id:1,
            type:'tenTimes',
            content: '10局/1房卡',
            checked:true
          }
          ,{
            id:2,
            type:'twnteenyTimes',
            content: '20局/2房卡',
            checked:false
          }     
        ],
      },
      notices:{
        type:'系统广播',
        content:'恭喜玩家XXX获得1000房卡'
      }
    }
  },
  methods:{
    creatRoom (type){
      this.showModal = true
    },
    closeModal(){
      this.showModal = false
    },
    submitCreate(){
      this.closeModal()
    }
  },

  mounted () {
    console.log('Hall rendered')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

